<template>
  <el-dialog title="文件上传" :close-on-click-modal="false" :visible.sync="uploadVisible.visible" width="700px">
    <el-form :model="fileForm" :rules="rules" ref="fileForm" label-width="100px" class="demo-fileForm">
      <el-form-item label="选择文件" prop="filePath">
        <el-upload ref="upload" class="upload-demo" drag :with-credentials="true" :action="`${baseURL}/v1/pc/api/file/fileUpload`" :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-remove="fileRemove" :on-exceed="onExceed" :multiple="false" :limit="1" :data="uploadPrams">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
      </el-form-item>
      <el-form-item label="文件名称" prop="fileName">
        <el-input v-model.trim="fileForm.fileName" placeholder="请输入文件名称"></el-input>
      </el-form-item>
      <el-form-item label="文件类别" prop="chainType">
        <el-select v-model="fileForm.chainType" placeholder="请选择文件类别">
          <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="fileDesc">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="fileForm.fileDesc"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="uploadVisible.visible = false">取 消</el-button>
      <el-button type="primary" @click="uploadFile">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addData } from '@/api/target'

export default {
  name: 'uploadFile',
  props: {
    uploadVisible: {
      type: Object
    },
    searchFrom: {
      type: Object
    }
  },
  data () {
    return {
      fileForm: {
        fileName: '',
        chainType: '',
        filePath: '',
        fileDesc: ''
      },
      rules: {
        fileName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
        chainType: [{ required: true, message: '请选择文件类别', trigger: 'change' }],
        filePath: [{ required: true, message: '请选择文件' }]
      },
      baseURL: this.baseURL,
      uploadPrams: {
        fileType: '',
        busType: 'chain'
      }, // 上传图片所需参数
      fileList: {} // 回传的文件信息
    }
  },
  computed: {
    options () {
      return JSON.parse(sessionStorage.getItem('chainType'))
    }
  },
  methods: {
    // 上传文件
    uploadFile () {
      this.$refs.fileForm.validate(valid => {
        if (valid) {
          const params = {
            ...this.fileForm,
            indexX: this.searchFrom.indexX,
            indexY: this.searchFrom.indexY,
            fileType: this.uploadPrams.fileType
          }
          addData(params)
            .then(res => {
              this.$message.success('操作成功')
              this.$emit('getList')
              this.uploadVisible.visible = false
            })
            .catch()
        }
      })
    },
    handleSuccess (res, file) {
      if (res.code === 'SUCCESS') {
        this.fileForm.filePath = res.data
      }
    },
    handleBeforeUpload (file) {
      const data = {}
      data.busType = 'chain'
      if (file.type.includes('image')) {
        data.fileType = 'image'
      } else {
        data.fileType = 'file'
      }
      this.uploadPrams = data
      return Promise.resolve(file)
    },
    fileRemove (file, fileList) {
      this.fileList = {}
    },
    onExceed (file, fileList) {
      this.$message.error('请先移除下方已经上传的文件再重新上传！')
    }
  }
}
</script>

<style lang="scss">

</style>
